import { Tabs } from 'antd'
import { lazy } from 'react'
import { EditModal } from '@/desktop/components'
import { Suspense } from '@/desktop/components/Loading'
import './index.module.less'

const Configs = lazy(async () => import('./configs'))
const Variables = lazy(async () => import('./variables'))

export { ReactComponent as Icon } from './icon.svg'

export function NormalWelcome({ open, onClose }: { open: boolean; onClose: () => void }) {
  return <EditModal title="欢迎语" open={open} onCancel={onClose} width="800px">
    {open ? (
      <Suspense>
        <Content />
      </Suspense>
    ) : null}
  </EditModal>
}

function Content() {
  const tabs = [
    { label: '欢迎语', key: 'message', children: <Configs /> },
    { label: '欢迎语变量', key: 'params', children: <Variables /> },
  ]

  return <div styleName="wrap">
    <Tabs type="card" items={tabs} />
  </div>
}
